<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>002-HTML5_Canvas</title>
	</head>
	<body>
		<!-- <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 -->
		<canvas id="myCanvas" width="400" height="300" style="border: 1px solid black"></canvas>
		<p>
			实例图片：
			<img id="scream" src="https://www.w3schools.com/html/img_avatar.png" alt="The Scream" width="100" height="100" />
		</p>

		<script>
			// 获取 canvas 元素
			let c = document.getElementById('myCanvas')

			// 创建 context 对象，getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
			let ctx = c.getContext('2d')

			// 【绘制一个红色的矩形】
			ctx.fillStyle = 'red' // 设置 fillStyle 属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
			ctx.fillRect(0, 0, 150, 75) // fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

			// 【绘制一条线】
			ctx.moveTo(0, 0) // moveTo(x,y) 定义线条开始坐标
			ctx.lineTo(400, 300) // lineTo(x,y) 定义线条结束坐标
			ctx.stroke() // stroke() 方法绘制路径的轮廓。

			// 【绘制一个圆】
			ctx.beginPath() // beginPath() 方法开始一个新的路径。
			ctx.arc(200, 150, 50, 0, 2 * Math.PI) // arc(x,y,r,start,stop) 方法绘制一个圆。
			ctx.stroke() // stroke() 方法绘制圆的轮廓。

			// 【绘制文本】
			// font - 定义字体
			// fillText(text,x,y) - 在 canvas 上绘制实心的文本
			// strokeText(text,x,y) - 在 canvas 上绘制空心的文本
			ctx.font = '30px Arial'
			ctx.strokeText('Hello World', 200, 50)

			// 【线性渐变】
			// 渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
			// createLinearGradient(x,y,x1,y1) - 创建线条渐变
			// createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
			// addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
			// 使用渐变，设置 fillStyle 或 strokeStyle 的值为 渐变，然后绘制形状，如矩形，文本，或一条线。

			// 创建渐变
			let grd = ctx.createLinearGradient(0, 0, 0, 300)
			grd.addColorStop(0, 'red')
			grd.addColorStop(1, 'white')

			// 填充渐变
			ctx.fillStyle = grd
			ctx.fillRect(0, 225, 150, 75)

			// 【绘制图像】
			// 把一幅图像放置到画布上，使用 drawImage(image,x,y)
			let img = document.getElementById('scream')
			img.onload = () => {
				ctx.drawImage(img, 300, 100, 100, 100) // 绘制图像
			}
		</script>
	</body>
</html>
